<!-- 售后管理 -->
<template>
    <div class="app-container">
        <!-- 搜索 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="formInline.aftersaleSn" placeholder="请输入售后编号" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-input v-model="formInline.orderId" placeholder="请输入订单ID" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="checkForm" icon="el-icon-search" size="mini">查找</el-button>
                <el-button type="primary" @click="downExcel" icon="el-icon-download" size="mini">导出</el-button>
            </el-form-item>
        </el-form>
        <div style="display: flex;justify-content: flex-end;">
            <el-button type="success" @click="checkForm" icon="el-icon-search">批量通过</el-button>
            <el-button type="danger" @click="downExcel" icon="el-icon-download">批量拒绝</el-button>
        </div>
        <!-- 列表 -->
        <el-tabs v-model="activeName" @tab-click="handleClick" empty-text="暂无数据">
            <el-tab-pane label="全部" name="first">
                <!-- 列表1 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="selection" min-width="12%"> </el-table-column>
                    <el-table-column prop="id" label="售后编号" min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="question" label="订单ID" min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="用户ID" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="售后类型" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="退款原因" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="退款价格" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="申请时间" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column label="操作" min-width="20%" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                                type="primary">编辑</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="待审核" name="second">
                <!-- 列表2 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="selection" min-width="12%"> </el-table-column>
                    <el-table-column prop="id" label="售后编号" min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="question" label="订单ID" min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="用户ID" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="售后类型" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="退款原因" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="退款价格" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="申请时间" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column label="操作" min-width="20%" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                                type="primary">编辑</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="带退款" name="third">
                <!-- 列表3 -->
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="selection" min-width="12%"> </el-table-column>
                    <el-table-column prop="id" label="售后编号" min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="question" label="订单ID" min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="用户ID" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="售后类型" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="退款原因" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="退款价格" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column prop="answer" label="申请时间" show-overflow-tooltip min-width="11%" align="center">
                    </el-table-column>
                    <el-table-column label="操作" min-width="20%" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
                                type="primary">编辑</el-button>
                            <el-button size="mini" type="danger"
                                @click="handleDelete(scope.$index, scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <!-- 按钮 -->
        <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <!-- 模态框 -->
        <el-dialog :title="show ? '新增问题' : '编辑问题'" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules" ref="form">
                <el-form-item label="问题" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.question" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="回复" :label-width="formLabelWidth" prop="answer">
                    <el-input v-model="form.answer" autocomplete="off" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <!-- 新增 -->
                <el-button type="primary" @click="confirmFun" v-show="show">确 定</el-button>
                <!-- 编辑 -->
                <el-button type="primary" @click="editFun" v-show="!show">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getList, addList, editList, delList } from "@/api/scgl/aftersale";
import * as XLSX from "xlsx";
export default {
    filters: {
        statusFilter(status) {
            const statusMap = {
                published: "success",
                draft: "gray",
                deleted: "danger",
            };
            return statusMap[status];
        },
    },
    data() {
        return {
            listLoading: true,
            // 表格数据
            tableData: [],
            queryParams: {}, //地址拼接的参数
            picUrl: '',
            srcList: [
                'http://admin.bsmall.byesame.com/wx/storage/fetch/g3ybo187ccun71o2tg03.jpg'
            ],
            // 分页
            currentPage: 1,
            size: 20,
            total: 0,
            // 查询条件
            formInline: {},
            question: '',
            // 模态框
            dialogFormVisible: false,
            form: {},
            formLabelWidth: '120px',
            rules: {
                question: [
                    { required: true, message: '问题不能为空', trigger: 'blur' }
                ],
                answer: [
                    { required: true, message: '回复不能为空', trigger: 'blur' }
                ],
            },
            // 上传头像
            imageUrl: '',
            iconUrl: "",//默认图片
            // 导出图片
            columns: [
                { title: "问题ID", key: "id" },
                { title: "问题内容", key: "question" },
                { title: "问题回复", key: "answer" },
            ],
            show: true,
            activeName: 'first'
        };
    },
    created() {
        this.getParams();
        this.fetchData();
        this.iconUrl = "/api/admin/storage/create";
    },
    methods: {
        // 获取拼接参数
        getParams() {
            this.queryParams = {
                page: this.currentPage,
                limit: this.size,
                sort: 'add_time',
                order: 'desc',
                question: this.question
            };
        },
        fetchData() {
            this.listLoading = true;
            getList(this.queryParams).then((response) => {
                console.log(response);
                this.tableData = response.data.list
                this.total = response.data.total
                this.srcList = response.data.list.map(item => item.picUrl)
                this.listLoading = false;
            });
        },

        // 点击换页
        handleClick(tab, event) {
            console.log(tab, event);
        },

        // 查找
        checkForm() {
            this.currentPage = 1
            this.question = this.formInline.question
            this.getParams()
            this.fetchData()
        },
        // 添加确认
        confirmFun() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    addList(this.form).then((response) => {
                        console.log(response);
                        this.fetchData();
                        this.dialogFormVisible = false
                        this.$notify({
                            title: "成功",
                            message: "创建成功",
                            type: "success",
                        });
                    }).catch((error) => {
                        console.error("Error during submission:", error);
                        this.$notify({
                            title: "失败",
                            message: response.errmsg,
                            type: "error",
                        });
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 导出
        downExcel() {
            this.$confirm("确定导出excel文件?", "提示", {
                type: "warning",
            }).then(() => {
                this.exportToExcel();
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消导出Excel文件",
                    duration: 2000,
                });
            });
        },
        exportToExcel() {
            const data = this.tableData.map(row => {
                const newObj = {};
                this.columns.forEach(col => {
                    newObj[col.title] = row[col.key];
                });
                return newObj;
            });
            // 创建工作表
            const ws = XLSX.utils.json_to_sheet(data);
            // 创建工作簿并添加工作表
            const wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            // 导出Excel文件
            XLSX.writeFile(wb, '品牌商信息.xlsx');
        },

        // 编辑
        handleEdit(index, row) {
            console.log(index, row);
            this.show = false
            this.dialogFormVisible = true
            this.form = { ...row }
        },
        // 编辑确认
        editFun() {
            editList(this.form).then((response) => {
                console.log(response);
                this.fetchData();
                this.dialogFormVisible = false
                this.$notify({
                    title: "成功",
                    message: "更新成功",
                    type: "success",
                });
            }).catch((error) => {
                console.error("Error during submission:", error);
                this.$notify({
                    title: "失败",
                    message: "参数不对",
                    type: "success",
                });
            });
        },
        // 删除
        handleDelete(index, id) {
            console.log(index, id);
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delList({ id: id }).then((response) => {
                    console.log(response);
                    this.fetchData();
                    this.dialogFormVisible = false
                    this.$notify({
                        title: "成功",
                        message: "删除成功",
                        type: "success",
                    });
                }).catch((error) => {
                    console.error("Error during submission:", error);
                    this.$notify({
                        title: "失败",
                        message: "参数不对",
                        type: "success",
                    });
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        // 分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.size = val
            this.getParams()
            this.fetchData();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val
            this.getParams()
            this.fetchData();
        },

    },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>
